<template>
  <div>
    <Drawer v-model="openDetail1" width="960" @on-close="cancelDrawer">
      <div class="sky-detail">
        <div slot="title" class="sky-title">
          <h3>
            {{ patientInfo.info }}
            <Poptip trigger="hover" placement="bottom" width="165"> </Poptip>
            <Tag :color="colors1[patientInfo.clue_status_name]">
              {{ patientInfo.clue_status_name }}
            </Tag>
            <span class="foundTime"
              >创建时间：{{ patientInfo.created_at }}</span
            >
          </h3>
        </div>

        <div slot="content">
          <DescriptionList :col="4">
            <Description term="手机号:">{{ patientInfo.mobile }}</Description>
            <Description term="微信号：">
              {{ patientInfo.wechat_num }}
            </Description>
            <Description term="地区：">
              {{ patientInfo.region }}
            </Description>
            <Description term="联系人：">
              <Ellipsis
                :text="patientInfo.contact_name"
                :length="8"
                tooltip
              ></Ellipsis>
            </Description>
            <Description term="渠道：">
              {{ patientInfo.source_channel
              }}<span
                v-if="
                  patientInfo.child_source_channel &&
                    patientInfo.child_source_channel != '/'
                "
                >/{{ patientInfo.child_source_channel }}</span
              >
            </Description>
            <Description term="对话方式：">
              {{ patientInfo.dialog_mode }}
            </Description>
            <Description term="录入人：">
              {{ patientInfo.user_real_name }}
            </Description>
          </DescriptionList>
          <DescriptionList :col="2">
            <Description term="来源备注：">
              <Ellipsis
                :text="patientInfo.source_remark"
                :length="50"
                tooltip
              ></Ellipsis>
            </Description>
            <Description term="来源页：">
              <Ellipsis
                :text="patientInfo.source_page"
                :length="50"
                tooltip
              ></Ellipsis>
            </Description>
            <Description term="唯一身份：">
              <Ellipsis
                :text="patientInfo.visitor_uid"
                :length="50"
                tooltip
              ></Ellipsis>
            </Description>
            <Description term="咨询备注：">{{
              patientInfo.advisory_remark
            }}</Description>
          </DescriptionList>
          <DescriptionList :col="2">
            <Description term="部门唯一标识：">{{
              patientInfo.unique_id
            }}</Description>
          </DescriptionList>
        </div>

        <div class="sky-cont">
          <Tabs :animated="false" name="children">
            <TabPane label="日志" name="name1" tab="children">
              <Timeline
                class="ivu-pt-16"
                style="max-height: 590px; overflow: auto"
                v-if="data.length > 0"
              >
                <TimelineItem v-for="(item, index) in data" :key="index">
                  <template v-if="item.contact_type == 'log'">
                    <p class="time">{{ item.created_at }}</p>
                    <p class="content">{{ item.content }}</p>
                    <p class="consultant">
                      <span class="c-inr ivu-mr-8">{{ item.name }}</span>
                      <Badge
                        :status="colors[item.status_name]"
                        :text="item.status_name"
                        v-if="item.status_name"
                      ></Badge>
                    </p>
                  </template>
                  <template v-if="item.contact_type == 'call'">
                    <p class="time">{{ item.created_at }}</p>
                    <p
                      class="content"
                      style="display: flex;align-items: center;"
                    >
                      <audio
                        :id="`audio-${item.id}`"
                        v-if="item.file_url"
                        controls
                        :src="item.file_url"
                        @play="audioplays(item.speed, item.id)"
                      ></audio>
                      <span v-if="item.file_url != ''" class="ivu-ml-16">
                        播放倍速：
                        <RadioGroup
                          v-model="item.speed"
                          @on-change="changeaudio(item.speed, item.id)"
                        >
                          <Radio
                            :label="items.id"
                            v-for="items in RadioGroup"
                            :key="items.id"
                            >{{ items.name }}</Radio
                          >
                        </RadioGroup>
                      </span>
                    </p>
                    <p class="consultant">
                      <span>{{ item.departmentType }}</span>
                      <span class="c-inr ivu-ml-8 ivu-mr-8">{{
                        item.nickname
                      }}</span>
                      <Badge
                        status="processing"
                        text="呼入"
                        v-if="+item.call_type === 1"
                        class="ivu-mr-8"
                      ></Badge>
                      <Badge
                        class="ivu-mr-8"
                        status="warning"
                        v-if="+item.call_type === 2"
                        text="呼出"
                      ></Badge>
                      <span class="ivu-mr-8" v-if="item.long_time"
                        >{{ item.long_time }}秒</span
                      >
                      <span v-if="+item.is_call === 0">未拨通</span>
                      <span v-else>已拨通</span>
                    </p>
                  </template>
                </TimelineItem>
              </Timeline>
              <div
                style="padding-top:30%;padding-left:50%;"
                v-if="data.length == 0 && !show"
              >
                暂无数据
              </div>
              <div style="position: relative;height: 300px;">
                <Spin size="large" fix v-if="show"></Spin>
              </div>
            </TabPane>
            <TabPane
              label="聊天记录"
              v-if="dialogList['type'] == 1"
              name="name2"
              tab="children"
            >
              <div v-if="dialogList['list'].length">
                <Scroll
                  v-if="!isLast"
                  :on-reach-bottom="handleReachBottom"
                  :height="600"
                  :distance-to-edge="[1, 1]"
                >
                  <template v-for="(item, index) in dialogList['list']">
                    <div :key="index" style="margin-top: 10px">
                      <div
                        style="margin-bottom: 6px;font-size: 13px;color: #a7a3a3;"
                      >
                        <span>{{
                          item.sender_type === "0"
                            ? "客服 - " +
                              (item.user_real_name
                                ? item.user_real_name
                                : item.from_id)
                            : "患者"
                        }}</span>
                        <span style="margin-left: 30px">{{
                          item.receive_time
                        }}</span>
                      </div>
                      <img
                        @click="seeBIg(item.message)"
                        style="width: 100px; object-fit: cover"
                        v-if="item.message.startsWith('https://')"
                        :src="item.message"
                        alt=""
                      />
                      <div
                        v-else
                        style="font-weight: 600;width: 300px; word-break: break-all;"
                      >
                        {{ item.message }}
                      </div>
                    </div>
                  </template>
                  <div
                    v-if="isLast"
                    style="display: flex;align-items: center;justify-content: center;color: #aaa;"
                  >
                    到底啦~
                  </div>
                </Scroll>
                <Scroll v-else :height="600" :distance-to-edge="[1, 1]">
                  <template v-for="(item, index) in dialogList['list']">
                    <div :key="index" style="margin-top: 10px">
                      <div
                        style="margin-bottom: 6px;font-size: 13px;color: #a7a3a3;"
                      >
                        <span>{{
                          item.sender_type === "0"
                            ? "客服 - " +
                              (item.user_real_name
                                ? item.user_real_name
                                : item.from_id)
                            : "患者"
                        }}</span>
                        <span style="margin-left: 30px">{{
                          item.receive_time
                        }}</span>
                      </div>
                      <img
                        @click="seeBIg(item.message)"
                        style="width: 100px; object-fit: cover"
                        v-if="item.message.startsWith('https://')"
                        :src="item.message"
                        alt=""
                      />
                      <div
                        v-else
                        style="font-weight: 600;width: 300px; word-break: break-all;"
                      >
                        {{ item.message }}
                      </div>
                    </div>
                  </template>
                  <div
                    v-if="isLast"
                    style="display: flex;align-items: center;justify-content: center;color: #aaa;"
                  >
                    到底啦~
                  </div>
                </Scroll>

                <Divider></Divider>
              </div>
              <div style="padding-top: 30%;text-align: center;" v-else>
                暂无内容
              </div>
            </TabPane>
            <TabPane label="留言内容" v-else name="name2" tab="children">
              <p style="padding: 20px;" v-if="dialogList.message">
                {{ dialogList["message"] }}
              </p>
              <p style="padding-top: 30%;text-align: center;" v-else>
                暂无内容
              </p>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </Drawer>
    <Modal v-model="imgModel" footer-hide>
      <p slot="header">查看大图</p>
      <img :src="src" style="width: 100%; object-fit: cover" />
    </Modal>
  </div>
</template>
<script>
import { gtMessage, clueLog } from "@api/jzy";
export default {
  props: ["openDetail", "patientInfo"],
  created() {
    this.openDetail1 = this.openDetail;
    this.params.clue_user_id = this.patientInfo.id;
    this.params.channel_id = this.patientInfo.dialog_mode_id;
    gtMessage(this.params).then((res) => {
      this.dialogList = res;
    });
    this.show = true;
    clueLog({ clue_user_id: this.params.clue_user_id }).then((res) => {
      this.data = res;
      this.show = false;
    });
  },
  data() {
    return {
      isLast: false,
      RadioGroup: [
        { id: 0.5, name: "0.5" },
        { id: 0.75, name: "0.75" },
        { id: 1, name: "1.0" },
        { id: 1.5, name: "1.5" },
        { id: 1.75, name: "1.75" },
        { id: 2, name: "2.0" },
      ],
      colors: {
        新数据: "processing",
        未联系上: "error",
        转客户: "success",
        无效: "warning",
        测试: "default",
      },
      params: {
        clue_user_id: "",
        page: 1,
        pageSize: 10,
        channel_id: "",
      },
      dialogList: {},
      src: "",
      name: "name1",
      imgModel: false,
      data: [],
      openDetail1: false,
      colors1: {
        新数据: "primary",
        未联系上: "error",
        转客户: "success",
        无效: "warning",
        测试: "default",
      },
      audioplay: null,
      speedid: null,
      show: false,
    };
  },
  methods: {
    cancelDrawer() {
      this.$emit("cancelDrawer");
    },
    seeBIg(item) {
      this.src = item;
      this.imgModel = true;
    },
    handleReachBottom() {
      if (
        this.dialogList.list.length >=
        this.params.page * this.params.pageSize
      ) {
        this.params.page++;
        gtMessage(this.params).then((res) => {
          this.dialogList.list = this.dialogList.list.concat(res.list);
        });
      } else {
        this.isLast = true;
        this.$Message.info("到底啦！");
        return;
      }
    },
    changeaudio(speed, id) {
      if (this.speedid === id) {
        this.audioplay.playbackRate = speed;
      }
    },
    audioplays(speed, id) {
      if (this.audioplay) {
        if (this.speedid !== id) {
          this.audioplay.pause();
          this.audioplay = null;
        }
      }
      this.speedid = id;
      this.audioplay = document.getElementById(`audio-${id}`);
      // console.log(speed, id)
      // console.log(this.audioplay)
      this.audioplay.playbackRate = speed;
    },
  },
};
</script>
<style scoped>
.sky-title {
  height: 50px;
  line-height: 50px;
  margin-bottom: 16px;
}
.sky-title span {
  font-size: 14px;
  font-weight: normal;
  margin: 0 8px;
}
.sky-title .foundTime {
  color: #888;
  font-size: 12px;
}
.sky-cont .content {
  padding: 10px 0;
}
.sky-cont .time {
  font-size: 14px;
  font-weight: 700;
}
.consultant {
  color: #9ea7b4;
}
/deep/::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
/deep/ ::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #6b7385;
  -webkit-box-shadow: inset 0 0 2px rgb(0 0 0 / 20%);
}
/deep/ ::-webkit-scrollbar-track {
  background: rgba(245, 247, 248, 0.5);
}
</style>
